<template>
  <div class="main-layout">
    <!-- 顶部导航栏 -->
    <header class="top-header">
      <h1>云存储系统-不只是存储</h1>
      <button @click="logout" class="logout-btn">退出登录</button>
    </header>
    
    <div class="content-container">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="nav-section">
          <div class="nav-header" @click="toggleNav('fileManagement')">
            <span class="nav-title">文件管理</span>
            <span class="nav-arrow" :class="{ 'expanded': navState.fileManagement }">▶</span>
          </div>
          <div class="nav-menu" v-show="navState.fileManagement">
            <div class="nav-item" :class="{ active: activeMenuItem === 'personalFiles' }" @click="setActiveMenuItem('personalFiles')">
              <span class="nav-icon">●</span> 个人文件
            </div>
            <div class="nav-item" :class="{ active: activeMenuItem === 'myShares' }" @click="setActiveMenuItem('myShares')">
              <span class="nav-icon">●</span> 我的分享
            </div>
            <div class="nav-item" :class="{ active: activeMenuItem === 'sharedFiles' }" @click="setActiveMenuItem('sharedFiles')">
              <span class="nav-icon">●</span> 共享文件
            </div>
          </div>
        </div>
        
        <div class="nav-section">
          <div class="nav-header" @click="toggleNav('statistics')">
            <span class="nav-title">数据统计</span>
            <span class="nav-arrow" :class="{ 'expanded': navState.statistics }">▶</span>
          </div>
          <div class="nav-menu" v-show="navState.statistics">
            <div class="nav-item" :class="{ active: activeMenuItem === 'videoStats' }" @click="setActiveMenuItem('videoStats')">
              <span class="nav-icon">●</span> 视频分享统计
            </div>
            <div class="nav-item" :class="{ active: activeMenuItem === 'imageStats' }" @click="setActiveMenuItem('imageStats')">
              <span class="nav-icon">●</span> 图片分享统计
            </div>
            <div class="nav-item" :class="{ active: activeMenuItem === 'downloadRanking' }" @click="setActiveMenuItem('downloadRanking')">
              <span class="nav-icon">●</span> 共享文件下载榜
            </div>
          </div>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="content">
        <h2>{{ getMenuTitle() }}</h2>
        <div class="content-body">
          <!-- 根据选中的菜单项显示不同内容 -->
          <PersonalFiles v-if="activeMenuItem === 'personalFiles'" />
          <MyShares v-else-if="activeMenuItem === 'myShares'" />
          <SharedFiles v-else-if="activeMenuItem === 'sharedFiles'" />
          <div v-else-if="activeMenuItem === 'videoStats'">视频分享统计内容区域</div>
          <div v-else-if="activeMenuItem === 'imageStats'">图片分享统计内容区域</div>
          <DownloadRanking v-else-if="activeMenuItem === 'downloadRanking'" />
          <div v-else>请选择一个菜单项</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import PersonalFiles from './PersonalFiles.vue';
import MyShares from './MyShares.vue';
import SharedFiles from './SharedFiles.vue';
import DownloadRanking from './DownloadRanking.vue';

// 导航状态控制
const navState = reactive({
  fileManagement: true,  // 默认展开
  statistics: false
});

// 当前激活的菜单项
const activeMenuItem = ref('personalFiles');

// 切换导航折叠状态
const toggleNav = (section) => {
  navState[section] = !navState[section];
};

// 设置当前活动菜单项
const setActiveMenuItem = (item) => {
  console.log(`切换菜单项: ${activeMenuItem.value} -> ${item}`);
  activeMenuItem.value = item;
  
  // 可以在这里添加特殊处理，例如在切换到下载榜时触发刷新
  if (item === 'downloadRanking') {
    console.log('切换到共享文件下载榜，触发数据刷新');
    // 通过自定义事件总线或其他机制通知组件刷新
    // 这里使用简单的全局事件
    window.dispatchEvent(new CustomEvent('refresh-download-ranking'));
  }
};

// 根据当前菜单项获取标题
const getMenuTitle = () => {
  const titles = {
    personalFiles: '个人文件',
    myShares: '我的分享',
    sharedFiles: '共享文件',
    videoStats: '视频分享统计',
    imageStats: '图片分享统计',
    downloadRanking: '共享文件下载榜'
  };
  
  return titles[activeMenuItem.value] || '欢迎使用';
};

// 登出函数，触发事件通知父组件
const logout = () => {
  const event = new CustomEvent('logout');
  window.dispatchEvent(event);
};
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #1e88e5;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 60px); /* 减去顶部导航栏的高度 */
}

.sidebar {
  width: 240px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.nav-section {
  margin-bottom: 10px;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.nav-header:hover {
  background-color: #f5f5f5;
}

.nav-title {
  font-size: 16px;
}

.nav-arrow {
  transition: transform 0.3s;
  font-size: 12px;
}

.nav-arrow.expanded {
  transform: rotate(90deg);
}

.nav-menu {
  padding: 5px 0;
}

.nav-item {
  padding: 12px 15px 12px 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-item.active {
  background-color: #e3f2fd;
  color: #1e88e5;
  border-left: 3px solid #1e88e5;
}

.nav-icon {
  margin-right: 10px;
  font-size: 12px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  height: 100%;
}

.content h2 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.content-body {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}

.logout-btn {
  padding: 8px 15px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
</style> 